<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <link rel="stylesheet" href="${ctx}/statics/less/index.css">
    <title>大屏</title>
</head>
<body>
    <section class="dashboard-page">
        <div class="column">
            <div class="module boxStyle" id="chart1"></div>
            <div class="module boxStyle" id="chart2"></div>
            <div class="module boxStyle" id="chart3"></div>
        </div>
        <div class="column">
            <div class="module boxStyle">
                <h3>設備運行狀態</h3>
                <ul class="legend">
                    <li><span></span>正常</li>
                    <li><span></span>停機</li>
                </ul>
                <div>
                    <div class="line-row">
                        <div class="lineName">A綫</div>
                        <ul>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#1設備</span>
                            </li>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#2設備</span>
                            </li>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#3設備</span>
                            </li>
                        </ul>
                    </div>
                    <div class="line-row">
                        <div class="lineName">A綫</div>
                        <ul>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#1設備</span>
                            </li>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#2設備</span>
                            </li>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#3設備</span>
                            </li>
                        </ul>
                    </div>
                    <div class="line-row">
                        <div class="lineName">A綫</div>
                        <ul>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#1設備</span>
                            </li>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#2設備</span>
                            </li>
                            <li>
                                <span class="devStatus"></span>
                                <span class="devName">#3設備</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="module boxStyle" id="chart5"></div>
            <div class="module boxStyle" id="chart6"></div>
            <div class="module boxStyle alertList"></div>
        </div>
    </section>

    <script type="text/html" id="alertInfo-tpl">
        <ul>
        {{# layui.each(d.list, function(index, item){ }}
            <li><span></span>{{item.info}}</li>
        {{# }); }}
        </ul>
    </script>
    <script src="${ctx}/statics/libs/echarts/echarts.min.js"></script>
    <script src="${ctx}/statics/libs/echarts/jyt-dark.js"></script>
    <script type="text/babel" src="${ctx}/statics/js/index.js"></script>
</body>
</html>
